var List = function()
{

	this.template = null;
	this.rows = new Array();
	this.inited = false;

	// taking template as argument
	if (arguments.length > 0)
	{
		this.template = arguments[0];
	}

	this.Id('list' + Math.random());

	this.Create = function()
	{
		if (this.template != null)
		{

			var el = null;
			var draggable = ($(this.template).attr('draggable') == 'true');
			var resizable = ($(this.template).attr('resizable') == 'true');

			el = $(this.template).clone(true);
			// TODO: TBD
			/*
			 * if (!draggable && !resizable) { el =
			 * $(this.template).clone(true); } else { el =
			 * $(this.template).clone(); if (draggable) { el.draggable(); } if
			 * (resizable) { el.resizable(); }
			 *  }
			 */

			this.VisualNode(el.get(0));

		}
		else
		{
			var el = document.createElement('DIV');
			el.setAttribute('id', 'List_' + this.Id())
			this.VisualNode(el);
		}
		this.inited = true;
		this.completeCreation();
	}

	this.completeCreation = function()
	{
		$(this.VisualNode()).empty()

		if (this.dataObject == null)
			return;

		if (this.dataObject.constructor != Array)
			return;// throw?

		this.rows = this.rows.slice(0, this.dataObject.length);

		for (i = 0; i < this.dataObject.length; i++)
		{
			this.rows[i] = new Row(rowTemplate);
			this.rows[i].Create();
			this.rows[i].Value(this.dataObject[i]);
		}

		for (i = 0; i < this.rows.length; i++)
		{

			$(this.VisualNode()).append($(this.rows[i].VisualNode()))
		}

	}
	
	//TODO rename to DataBind
	this.dataSourceChanged = function()
	{

		if (this.inited)
			this.completeCreation();
	}

}

List.inherits(Component);